<div class="button-item">
    <button pButton type="text" class="ui-button-success" icon="fa fa-check" (click)="saveUpdate()" label="保存"></button>
    <button pButton type="text" class="ui-button-info" icon="fa fa-refresh" (click)="refresh()" label="刷新"></button>
</div>

<div class="transaction-config-field-container">
    <p-table #dt [columns]="cols" [value]="fields" [scrollable]="true" [scrollHeight]="'calc(100vh - 250px)'">
        <ng-template pTemplate="caption">
            <div style="text-align: right">
                <i class="fa fa-search" style="margin:4px 4px 0 0"></i>
                <input type="text" pInputText size="50" placeholder="输入关键字查询..."
                    (input)="dt.filterGlobal($event.target.value, 'contains')" style="width:auto">
            </div>
        </ng-template>
        <ng-template pTemplate="header" let-columns>
            <tr>
                <th *ngFor="let col of columns" [ngStyle]="col.style">
                    {{col.header}}
                </th>
            </tr>
        </ng-template>

        <ng-template pTemplate="body" let-rowData let-columns="columns" let-rowIndex="rowIndex">
            <tr>
                <ng-container *ngFor="let col of columns;">
                    <!--序号列不可编辑-->
                    <td *ngIf="col.field == 'index'" [ngStyle]="col.style">{{rowIndex + 1 }}</td>
                    <!--字段填写列-->
                    <td pEditableColumn
                        *ngIf="col.field != 'index' && col.field != 'visibleFlag' && col.field != 'searchFlag' "
                        [ngStyle]="col.style">
                        <p-cellEditor>
                            <ng-template pTemplate="input">
                                <input type="text" [(ngModel)]="rowData[col.field]">
                            </ng-template>
                            <ng-template pTemplate="output">
                                {{rowData[col.field]}}
                            </ng-template>
                        </p-cellEditor>
                    </td>
                    <!--是否隐藏列-->
                    <td pEditableColumn *ngIf="col.field == 'visibleFlag' || col.field == 'searchFlag'"
                        [ngStyle]="col.style">
                        <p-cellEditor>
                            <ng-template pTemplate="input">
                                <p-inputSwitch [(ngModel)]="rowData[col.field]"></p-inputSwitch>
                            </ng-template>
                            <ng-template pTemplate="output">
                                <p-inputSwitch [(ngModel)]="rowData[col.field]"></p-inputSwitch>
                            </ng-template>
                        </p-cellEditor>
                    </td>
                </ng-container>
            </tr>
        </ng-template>
    </p-table>
</div>